<template>
  <div class="content">
    <van-index-bar style="height: 80vh;">
      <van-index-anchor index="B" />

      <van-cell
        v-for="friend in friends_data"
        :key="friend.id"
        :title="friend.nickName"
        @click="click_friend(friend)"
        style="line-height: 44px;"
      >
        <div class="child">
          <img :src="friend.faceImage" />
        </div>
      </van-cell>

      <!-- <van-index-anchor index="B" />
      <van-cell title="文本" />
      <van-cell title="文本" />
      <van-cell title="文本" />...-->
    </van-index-bar>
    <div class="friend_info_view">
      <van-action-sheet v-model:show="friend_info_view.display" title="好友信息">
        <div>
          <van-card
            :desc="(friend_info_view.data.sex == '0' ? '男' : '女') +
            '    胡说号:' + friend_info_view.data.nonsenseCode"
            :title="friend_info_view.data.nickName"
            thumb="https://img.yzcdn.cn/vant/cat.jpeg"
          >
            <template #thumb>
              <img :src="friend_info_view.data.faceImage" />
            </template>
          </van-card>
          <div style="margin: 16px;">
            <van-button
              round
              block
              type="primary"
              @click="click_btn_sendMsg(friend_info_view.data.id)"
            >发送信息</van-button>
            <van-button style="margin-top: 16px;" round block type="default">删除好友</van-button>
          </div>
        </div>
      </van-action-sheet>
    </div>
  </div>
</template>

<script lang="ts">
import { findByMyFriends } from "@/api/requests/base";
import { onMounted, reactive, ref } from "vue";
import router from "@/router";
import {
  setFriendsDataCache,
  getUserId,
  getFriendDataCache,
  getFriendDataCaches,
} from "@/utils/app";

type Friend = {
  faceImage: string;
  id: string;
  nickName: string;
  nonsenseCode: string;
  phone: string;
  sex: string;
  userId: string;
};

export default {
  setup() {
    onMounted(() => {
      get_MyFriends();
    });
    let friends_data: any = ref([]);
    const get_MyFriends = () => {
      const data = getFriendDataCaches();
      if (data != null) {
        friends_data.value = data;
      }
    };

    const friend_info_view = ref({
      display: false,
      data: {},
    });
    const click_friend = (friend: Friend) => {
      friend_info_view.value = {
        display: true,
        data: friend,
      };
      console.log(friend_info_view.value.data);
    };

    const click_btn_sendMsg = (firendId: string) => {
      router.push("/chating/" + firendId);
    };

    return {
      friends_data,
      get_MyFriends,
      click_friend,
      friend_info_view,
      click_btn_sendMsg,
    };
  },
};
</script>

<style lang="less" scoped>
.friend_info_view {
  padding: 15px;
  img {
    width: 50px;
    height: 50px;
  }
  .van-popup {
    height: 50vh;
  }
}
</style>

<style lang="less">
.van-card__title {
  font-size: 1rem;
}

.van-card__desc {
  font-size: 1rem;
  margin-top: 6px;
}

.child {
  width: 40px;
  height: 40px;
  background: #f2f3f5;
  border-radius: 4px;
  position: absolute;
  right: 0px;
  img {
    height: 40px;
    width: 40px;
    border-radius: 4px;
  }
}
</style>
